import React, { Component, Fragment } from 'react';
import { formatMessage, FormattedMessage } from 'umi/locale';
import { Form, Input, Upload, Select, Button, message } from 'antd';
import { connect } from 'dva';
import styles from './BaseView.less';


const FormItem = Form.Item;
const { Option } = Select;


@connect(({ user }) => ({
  currentUser: user.currentUser,
}))
@Form.create()
class BindingView extends Component {
  constructor() {
    super();
    this.state = {
      phone: false
    };
  }

  componentDidMount() {
    const { dispatch, currentUser } = this.props;
    if (currentUser.phone === '') {
      this.setState(() => ({
        phone: true
      }))
    }

  }

  getViewDom = ref => {
    this.view = ref;
  };

  saveMessage = () => {
    let userInfo = this.props.form.getFieldsValue();
    this.props.form.validateFields((err, values) => {


      if (!err) {
        const { dispatch, currentUser } = this.props;
        this.reqRef = requestAnimationFrame(() => {
          dispatch({
            type: 'geographic/fetcd',
            payload: { password:userInfo.atPassword,newPassword:userInfo.addPassword,repeatPassword:userInfo.repPassword },
            callback: res => {
              message.success(`${res.msg}`)
            },
          });
        });
      }
    })
  }

  reset=()=>{
    this.props.form.resetFields();

  }

  checkFieldForPassword(rule, value, callback) {
    const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
    if (rule.field === 'addPassword') {
      if (value) {
        if (reg.test(value)) {
          if (value.length > 30 || value.length < 6) {
            callback('只可填入8-20位数字和字母组合');
          } else {
            callback();
          }
        } else {
          callback('只可填入8-20位数字和字母组合');
        }
      } else {
        callback('只可填入8-20位数字和字母组合');
      }
    }
  }

  render() {
    const { currentUser } = this.props;
    const {
      form: { getFieldDecorator },
    } = this.props;
    return (
      <div className={styles.backgroundp}>
        {/* {currentUser.phone ?<p>亲爱的用户，系统检测到您已经绑定手机，为了您的账号安全，请勿将密码泄露给其他人</p>: <p>亲爱的用户，系统检测到您还没有绑定手机，为了您的账号安全，建议绑定手机</p>} */}
        <div className={styles.baseView} ref={this.getViewDom}>
          <div className={styles.left}>
            <Form layout="vertical" onSubmit={this.handleSubmit} hideRequiredMark>
              <FormItem label='当前密码'>
                {getFieldDecorator('atPassword', {
                  rules: [
                    {
                      required: true,
                      message: '当前密码为空'

                    },

                  ],
                })( <Input.Password placeholder="" />)}
              </FormItem>
              <FormItem  label='新的密码'>
                {getFieldDecorator('addPassword', {
                  rules: [
                    {
                      required: true,
                      message: '新密码为空'
                    },
                    {
                      validator: this.checkFieldForPassword,
                    }
                  ],
                })(
                  <Input.Password placeholder="" />
                    // <Input type='password' allowClear />
                )}
              </FormItem>
              {
                this.state.phone ? null : <FormItem label='重复新密码'>
                  {getFieldDecorator('repPassword', {
                    initialValue: '',
                    rules: [
                      {
                        required: true,
                        message: '重复新密码为空'
                      },
                    ],
                  })( <Input.Password placeholder="" />)}
                </FormItem>
              }
              <Button type="primary" onClick={this.saveMessage}>修改密码</Button>
              {/* <Button style={{ marginLeft: 10 }} onClick={this.reset}>重置</Button> */}
            </Form>
          </div>
        </div>
      </div>
    );
  }
}

export default BindingView;
